<template>
  <view class="image-wrok bg-white mt-[30rpx] px-[30rpx] box-border">
    <view class="image-content flex justify-between">
      <view class="image-date flex items-center">
        <text class="doc w-[8rpx] h-[8rpx] mr-[12rpx] rounded-full"></text>
        <text class="text-[36rpx] font-bold text-[#1b1b1b]">2</text>
        <text class="text-[24rpx] date-m">/12</text>
      </view>
      <view class="image-attr flex">
        <view
          v-for="item in 3"
          :key="item"
          class="pr-[16rpx] pl-[16rpx] h-[48rpx] bg-[#EBF7F4] text-[#304540] rounded-full ml-[32rpx]"
        >
          AI内容
        </view>
      </view>
    </view>
    <wd-row flex justify="space-between">
      <wd-col :span="12" v-for="item in 4" :key="item">
        <view
          class="w-[323rpx] h-[323rpx] mt-25rpx img-box rounded-[20rpx] bg-[rgba(0,0,0,0.8)]"
        >
          <image
            mode="aspectFill"
            class="w-[100%] h-[100%]"
            src="/static/images/bg.png"
          />
          <view
            class="img-text w-[100%] bottom-0 text-white p-[16rpx] box-border"
          >
            <view class="text-[32rpx] font-bold flex justify-between">
              <text>二次元文案</text>
              <view
                class="text-[16rpx] h-[34rpx] font-normal rounded-full bg-black text-white justify-center flex items-center px-[12rpx] box-border"
              >
                87人评论
              </view>
            </view>
            <text class="text-[20rpx]"
              >我可以帮你输入不同的角色聊天文案哦~</text
            >
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
</template>
<script lang="ts" setup>
import { defineProps } from "vue";

const props = defineProps<{
  detailData: any;
}>();
</script>
<style lang="scss" scoped>
.image-wrok {
  .image-content {
    position: relative;
    .doc {
      background: rgba(200, 255, 122, 1);
    }
    .date-m {
      position: relative;
      top: 2rpx;
      margin-left: 8rpx;
      color: rgba(27, 27, 27, 0.4);
    }
  }
  .img-box {
    position: relative;
    overflow: hidden;
    .img-text {
      position: absolute;
      line-height: 1.3;
    }
  }
}
</style>
